<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="description" content="记事本"/>
	<meta name="author" content="joney"/>
	<title>添加</title>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/mobile.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/toastr/toastr.css}"/>

	<script type="text/javascript" th:src="@{/js/jquery-1.8.0.min.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/jquery.easyui.mobile.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
	<script type="text/javascript" th:src="@{/js/note_common.js}"></script>
	<script type="text/javascript" th:src="@{/js/crypto/3.1.9/crypto-js.js}"></script>
	<script type="text/javascript" th:src="@{/js/crypto/crypt.js}"></script>
	<script type="text/javascript" th:src="@{/toastr/toastr.min.js}"></script>
	<style>

		.panel-body{
			font-size: 14px;
		}
		.footer{
			position:fixed;
			bottom:0;
			text-align:center;
			/*
			filter:alpha(opacity:30);
			opacity:0.3;
			-moz-opacity:0.3;
			-khtml-opacity: 0.3;
			*/
			font-size: 12px;
			width:100%;
			padding: 10px;
		}
		#cover1{
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 9999;
			left: 0;
			top: 0;
			background-color: rgba(255,255,255,0.9); /* RGB背景透明，文字不透明*/
			/*			opacity: 0.2;
                        filter:alpha(opacity:20);
                        -moz-opacity:0.2;
                        -khtml-opacity: 0.2*/
		}
		#cover2{
			position:absolute;top:50%;left:45%;
			background-color: white;
/*			border-radius:15px;
			border: 1px solid #95B8E7;*/
			text-align: center;
			vertical-align: center;

		}
		.textbox-label,.datebox-label,.combobox-label,.panel-title{
			font-size: 16px;
		}
		.textbox-label{
			width: 50px;
		}
		.textbox .textbox-text{
			padding: 8px 4px;
			font-size: 16px;
		}
		.combobox-item{
			font-size: 16px;
			padding: 10px;
		}

		.tbView{
			border-collapse: collapse;
			width: 100%;
		}

		.tbView caption {
			caption-side: top;
			text-align: left;
		}
		.tbView td{
			font-size: 16px;
			border: 1px dotted #95B8E7;
			height: 40px;
		}

		.tbView th{
			font-size: 16px;
			border: 1px dotted #95B8E7; /*#aaa;*/
			text-align: center;
			height: 30px;
		}
		.l-btn-text {
			width: 50px;
			font-size: 16px;
		}

		.tbDetail{
			font-size: 18px;
		}
		.tbDetail .tbTitle{
			text-align: right;
			width: 80px;
			padding-right: 20px;
		}
		.tbTitle{
			font-weight: bold;
		}
		.dialog-button{
			text-align: center;
		}
	</style>
</head>
<body>

<div id="cover1">
	<div id="cover2">
		<img th:src="@{/easyui/themes/default/images/loading3.gif}"/>
	</div>
</div>
<div class="easyui-navpanel" style="position:relative;padding:5px">
	<header id="hh">
		<div class="m-toolbar">
			<div class="m-title">消费记录列表</div>
			<div class="m-left">
				<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="window.location.href='/note/main'">主页</a>
			</div>
			<div class="m-right">
				<a href="javascript:void(0)" class="easyui-linkbutton m-next" plain="true" outline="true" onclick="window.location.href='/note/consume_edit'">新增</a>
			</div>
		</div>
	</header>

	<form id="ff" action="/note/consume_list" method="post">
		<div style="margin-bottom:10px">
			<input class="easyui-datebox" id="startDate" name="startDate" label="开始:" th:value="${qry.startDate}" data-options="prompt:'开始日期',editable:false,panelWidth:260,panelHeight:300" style="width:100%;height:40px">
			<div style="margin-top: 10px"></div>
			<input class="easyui-datebox" id="endDate" name="endDate" label="结束:" th:value="${qry.endDate}" data-options="prompt:'结束日期',editable:false,panelWidth:260,panelHeight:300" style="width:100%;height:40px">
		</div>
		<div style="margin-bottom:10px">
			<!--<label class="combobox-label">类别:</label>-->
			<select id="kinds" name="kinds" class="easyui-combobox" label="类别:" data-options="editable:false,panelHeight:400" style="width:100%;height:40px;">
				<option value="" th:selected="${#strings.isEmpty(qry.kinds)}">全部</option>
				<option value="1" th:selected="${qry.kinds=='1'}">早餐</option>
				<option value="2" th:selected="${qry.kinds=='2'}">午餐</option>
				<option value="3" th:selected="${qry.kinds=='3'}">晚餐</option>
				<option value="4" th:selected="${qry.kinds=='4'}">零食</option>
				<option value="5" th:selected="${qry.kinds=='5'}">生活用品</option>
				<option value="6" th:selected="${qry.kinds=='6'}">鲜花/礼品</option>
				<option value="7" th:selected="${qry.kinds=='7'}">服饰</option>
				<option value="8" th:selected="${qry.kinds=='8'}">房租水电</option>
				<option value="9" th:selected="${qry.kinds=='9'}">电话费</option>
				<option value="10" th:selected="${qry.kinds=='10'}">车费</option>
				<option value="11" th:selected="${qry.kinds=='11'}">游玩/娱乐</option>
				<option value="12" th:selected="${qry.kinds=='12'}">车辆油费/耗损</option>
				<option value="13" th:selected="${qry.kinds=='13'}">化妆品</option>
				<option value="14" th:selected="${qry.kinds=='14'}">家电耗材</option>
				<option value="15" th:selected="${qry.kinds=='15'}">其它</option>
			</select>
		</div>
		<div style="text-align:center;margin-bottom:30px">
			<input type="submit" class="easyui-linkbutton" style="width:80%;height: 38px;font-size: 16px" value="查询">
		</div>
	</form>
<!--	<table id="dg" data-options="singleSelect:true,border:false,fit:true,fitColumns:true,scrollbarSize:0">
		<thead>
		<tr>
			<th data-options="field:'id',width:80,align:'center'">ID</th>
			<th data-options="field:'cost',width:100,align:'center'">金额(单位:元)</th>
			<th data-options="field:'kinds',width:80,align:'center'">种类</th>
			<th data-options="field:'date',width:100,align:'center'">日期</th>
		</tr>
		</thead>
	</table>-->
	<table class="tbView">
		<caption>单位:元</caption>
		<thead>
			<tr>
				<th>No.</th>
				<th>金额</th>
				<th>种类</th>
				<th>日期</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item,itemStat  : ${list}" th:onclick="'showDetail('+${itemStat.count}+','+${#lists.size(list)}+')'">
				<input type="hidden" th:id="${itemStat.count+'_id'}" th:value="${item.id}">
				<input type="hidden" th:id="${itemStat.count+'_cost'}" th:value="${item.cost}">
				<input type="hidden" th:id="${itemStat.count+'_kinds'}" th:value="${item.kinds.desc}">
				<input type="hidden" th:id="${itemStat.count+'_date'}" th:value="${#dates.format(item.date, 'yyyy-MM-dd')}">
				<input type="hidden" th:id="${itemStat.count+'_createTime'}" th:value="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}">
				<input type="hidden" th:id="${itemStat.count+'_addr'}" th:value="${item.addr}">
				<input type="hidden" th:id="${itemStat.count+'_remark'}" th:value="${item.remark}">
				<td align="center" th:text="${itemStat.count}"></td>
				<td align="right" th:text="${item.cost}" style="padding-right: 5px"></td>
				<td align="center" th:text="${item.kinds.desc}"></td>
				<td align="center" th:text="${#dates.format(item.date, 'yyyy-MM-dd')}"></td>
			</tr>
			<tr th:if="${not #lists.isEmpty(list)}">
				<td align="center">统计</td>
				<td align="right" th:text="${info.totalCost}"></td>
				<td align="center" th:text="${info.totalKinds}"></td>
				<td align="center" th:text="${info.totalDays}"></td>
			</tr>

			<tr th:if="${#lists.isEmpty(list)}">
				<td colspan="4" align="center">暂无记录,请重新选择查询条件</td>
			</tr>

		</tbody>
	</table>

	<div id="dlg1" class="easyui-dialog" style="padding:10px;width:100%;" data-options="inline:true,modal:true,closed:true,title:'明细'">
		<table class="tbDetail" cellpadding="5">
			<tr>
				<td class="tbTitle">ID:</td>
				<td>
					<span id="_id"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">金额:</td>
				<td>
					<span id="_cost"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">种类:</td>
				<td>
					<span id="_kinds"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">日期:</td>
				<td>
					<span id="_date"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">地点:</td>
				<td>
					<span id="_addr"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">备注:</td>
				<td>
					<span id="_remark"></span>
				</td>
			</tr>
			<tr>
				<td class="tbTitle">录入时间:</td>
				<td>
					<span id="_createTime"></span>
				</td>
			</tr>
		</table>
		<div class="dialog-button" style="">
			<a href="javascript:void(0)" class="easyui-linkbutton" style="width:30%;height:45px;" onclick="$('#dlg1').dialog('close')">关闭</a>
			<a id="preBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:true" style="width:30%;height:45px;" onclick="nextItem(-1)">上一条</a>
			<a id="nextBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:true" style="width:30%;height:45px;" onclick="nextItem(1)">下一条</a>
		</div>
	</div>
</div>
<script type="text/javascript">
    $(function(){
/*        $('#dg').datagrid({
            data: getData()
        });*/

//日期控制扩展选择日期小于等于当前日期，开始日期小于等于结束日期
        $("#startDate").datebox('calendar').calendar({
            validator:function(beginDate){
                var date = new Date();
                return beginDate < date;
            }
        });
        $("#endDate").datebox('calendar').calendar({
            validator:function(beginDate){
                var date = new Date();
                return beginDate <= date;
            }
        });
        $("#startDate").datebox({
            onSelect:function(beginDate){
                $('#endDate').datebox().datebox('calendar').calendar({
                    validator:function(endDate){
                        var date = new Date();
                        return beginDate <= endDate && endDate < date;
                    }
                });
            }
        });
/*        $("#endDate").datebox({
            onSelect:function(endDate){
                $('#startDate').datebox().datebox('calendar').calendar({
                    validator:function(startDate){
                        var date = new Date();
                        return beginDate <= endDate && endDate < date;
                    }
                });
            }
        });*/

		$("#cover1").hide();
    });

    var totalSize=0;
    var curtIndex=0;
    function showDetail(index,size) {
        totalSize=size;
        curtIndex=index;
        $("#_id").html($("#"+index+"_id").val());
        $("#_cost").html($("#"+index+"_cost").val());
        $("#_kinds").html($("#"+index+"_kinds").val());
        $("#_date").html($("#"+index+"_date").val());
        $("#_addr").html($("#"+index+"_addr").val());
        $("#_remark").html($("#"+index+"_remark").val());
        $("#_createTime").html($("#"+index+"_createTime").val());

        if(index==1){
            $('#preBtn').linkbutton('disable');
		}else{
            $('#preBtn').linkbutton('enable');
		}
		if(index == size){
            $('#nextBtn').linkbutton('disable');
		}else{
            $('#nextBtn').linkbutton('enable');
		}
        $('#dlg1').dialog('open').dialog('center');
    }

    function nextItem(num) {
        showDetail(num+curtIndex,totalSize);
    }

</script>
</body>
</html>